<template>
  <div>
    <MBX
      level="商品管理"
      level2="参数列表"
    ></MBX>
    <!-- 卡片 -->
    <el-card>
      <!-- 警告 -->
      <el-alert
        title="注意：只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
      >
      </el-alert>
      <!-- 警告 -->
      <!-- 联级菜单 -->
      <br>
      <el-row>
        <el-col :span="2">
          选择商品分类：
        </el-col>
        <el-col :span="22">
          <el-cascader
            :options="paramslist"
            v-model="paramsid"
            :props="propslist"
            @change="cascaderchange"
          ></el-cascader>
          {{paramsid}}
        </el-col>
      </el-row>
      <!-- 联级菜单 -->
      <!-- tab切换 -->
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="动态属性"
          name="many"
          :disabled="show"
        >
          <!-- 动态参数 -->
          <div>
            <el-button
              type="primary"
              size="mini"
              :disabled="flag"
              @click="tjcanshu"
              class="mb15"
            >添加参数</el-button>
          </div>

          <el-table
            :border="true"
            :data="dongtai"
          >
            <el-table-column type="expand">
              <!-- 参数 -->
              <template slot-scope="scope">
                <div>
                  <!-- 标签 -->
                  <el-tag
                    :key="index"
                    v-for="(item,index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index,scope.row)"
                    style="margin:5px"
                  >
                    {{item}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                  >+ New Tag</el-button>
                  <!-- 标签 -->
                </div>
              </template>
              <!-- 参数 -->
            </el-table-column>
            <el-table-column
              label="#"
              type="index"
            ></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="dakaimotaikuang(scope.row)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="shanchuform(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 动态参数 -->
        </el-tab-pane>
        <el-tab-pane
          label="静态属性"
          name="only"
          :disabled="show"
        >
          <!-- 静态参数 -->
          <div>
            <el-button
              type="primary"
              size="mini"
              :disabled="flag"
              @click="tjcanshu"
              class="mb15"
            >添加参数</el-button>
          </div>

          <el-table
            :border="true"
            :data="jingtai"
          >
            <el-table-column type="expand">
              <!-- 参数 -->
              <template slot-scope="scope">
                <div>
                  <!-- 标签 -->
                  <el-tag
                    :key="index"
                    v-for="(item,index) in scope.row.attr_vals"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index,scope.row)"
                    style="margin:5px"
                  >
                    {{item}}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                  >+ New Tag</el-button>
                  <!-- 标签 -->
                </div>
              </template>
              <!-- 参数 -->
            </el-table-column>
            <el-table-column
              label="#"
              type="index"
            ></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="primary"
                    icon="el-icon-edit"
                    @click="dakaimotaikuang(scope.row)"
                  >编辑</el-button>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="shanchuform(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 静态参数 -->
        </el-tab-pane>
      </el-tabs>
      <!-- tab切换 -->
    </el-card>
    <!-- 卡片 -->
    <!-- 模态框 -->

    <el-dialog
      :title="activeName=='many'?'添加动态参数':'添加静态参数'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="addcanshu"
        :rules="formcanshu"
        ref="formcanshuref"
      >
        <el-form-item
          prop="attr_name"
          label="动态参数"
        >
          <el-input v-model="addcanshu.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="tjcanshuok"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 模态框 -->
    <!-- 编辑模态框 -->

    <el-dialog
      :title="activeName=='many'?'编辑动态参数':'编辑静态参数'"
      :visible.sync="dialogVisible1"
      width="30%"
    >
      <el-form :model="editcanshu">
        <el-form-item label="动态参数">
          <el-input v-model="editcanshu.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="bianjiok"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑模态框 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "many",
      paramslist: [],
      paramsid: [],
      propslist: {
        label: "cat_name",
        children: "children",
        value: "cat_id",
        expandTrigger: "hover"
      },
      flag: true,
      dongtai: [],
      jingtai: [],
      dialogVisible: false,
      dialogVisible1: false,
      addcanshu: {
        attr_name: ""
      },
      editcanshu: {
        attr_name: "",
        attr_id: 0
      },
      formcanshu: {
        attr_name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      },
      show: true,
      attr_vals: []
    };
  },
  created() {
    this.xrfl();
  },
  methods: {
    //   切换tabs
    async handleClick() {
      console.log("当前是动态还是静态", this.activeName);
      //   判断静态属性或动态属性
      if (this.activeName == "only") {
        let res = await this.$API.canshuliebiao(
          this.liebiaoid,
          this.activeName
        );
        res.forEach(item => {
          // 转为数组
          item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
          //   input的显示与隐藏
          item.inputVisible = false;
          //   input绑定的值
          item.inputValue = "";
        });
        console.log("静态参数", res);

        this.jingtai = res;
      } else {
        let res = await this.$API.canshuliebiao(
          this.liebiaoid,
          this.activeName
        );
        res.forEach(item => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(",") : [];
          item.inputVisible = false;
          item.inputValue = "";
        });
        console.log("动态参数", res);
        this.dongtai = res;
      }
    },
    // 渲染商品分类列表
    async xrfl() {
      let res = await this.$API.GoodsFenLei();
      console.log("商品分类列表", res);
      this.paramslist = res;
    },
    // 点击选择商品分类
    async cascaderchange() {
      console.log("存id数组的长度", this.paramsid.length);
      if (this.paramsid.length == 3) {
        this.flag = false;
        this.show = false;
        this.handleClick();
      } else {
        this.flag = true;
        this.show = true;
        this.$message({
          message: "警告!只允许为第三级分类设置相关参数！",
          type: "warning"
        });
        this.jingtai = [];
        this.dongtai = [];
      }
    },
    // 点击删除标签--静态属性或动态属性
    async handleClose(index, row) {
      console.log("点击删除标签");
      row.attr_vals.splice(index, 1);
      row.inputVisible = false;
      let res = await this.$API.addshuxing(this.liebiaoid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(",")
      });
      console.log("添加动态静态商品属性", res);
      this.xrfl();
    },
    // 添加动态或静态属性中   点击按钮显示input框
    showInput(row) {
      row.inputVisible = true;
      this.$nextTick(_ => {
        console.log("DOM节点", this.$refs.saveTagInput);
        this.$refs.saveTagInput.focus();
      });
    },
    // 添加动态属性或静态属性标签
    async handleInputConfirm(row) {
      console.log("提交");
      if (row.inputValue.trim().length === 0) return;

      row.attr_vals.push(row.inputValue);

      row.inputVisible = false;
      let res = await this.$API.addshuxing(this.liebiaoid, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(",")
      });
      console.log("添加动态静态商品属性", res);
      this.xrfl();
    },
    // 打开添加参数模态框
    tjcanshu() {
      this.dialogVisible = true;
    },
    // 添加参数
    async tjcanshuok() {
      this.$refs.formcanshuref.validate(async valid => {
        if (valid) {
          let res = await this.$API.addcanshulist(this.liebiaoid, {
            attr_name: this.addcanshu.attr_name,
            attr_sel: this.activeName
          });
          this.handleClick();
        }
      });

      this.dialogVisible = false;
      this.addcanshu.attr_name = "";
    },
    // 删除分类参数
    async shanchuform(row) {
      console.log("删除", row);
      let res = await this.$API.shanchucanshulist(this.liebiaoid, row.attr_id);
      this.handleClick();
    },
    // 打开编辑框，回填数据
    dakaimotaikuang(row) {
      this.editcanshu.attr_name = row.attr_name;
      this.editcanshu.attr_id = row.attr_id;
      this.attr_vals = row.attr_vals;
      this.dialogVisible1 = true;
    },
    // 确认编辑，编辑的是添加的参数
    async bianjiok() {
      let res = await this.$API.addshuxing(
        this.liebiaoid,
        this.editcanshu.attr_id,
        {
          attr_name: this.editcanshu.attr_name,
          attr_sel: this.activeName,
          attr_vals: this.attr_vals.join(",")
        }
      );
      this.handleClick();
      this.dialogVisible1 = false;
    }
  },
  computed: {
    //   分类数组中最后一个id
    liebiaoid() {
      return this.paramsid[this.paramsid.length - 1];
    }
  }
};
</script>

<style >
.el-col {
  line-height: 50px;
}
.input-new-tag {
  width: 100px;
}
</style>
